<template>
  <view class="deco-header-bar" :style="[innerStyle]">
    <zm-navbar :is-back="false" :border-bottom="false" gradient gradient-heigt="50" :custom-style="navbarCustomStyle">
      <view class="flex items-center">
        <view class="flex items-center mr-24 transition" :class="{ 'text-white': !scrollFlag }" @click="toView('pages/utils/select-city/select-city')">
          <text class="font-30 mr-4">{{ cityName || "定位中..." }}</text>
          <u-icon name="arrow-down-fill" size="18rpx"></u-icon>
        </view>
        <view class="flex flex-1 items-center pr-24 bg-white radius-full" :class="{ 'box-shadow': scrollFlag }">
          <u-search
            placeholder="搜索电影和影院"
            :show-action="false"
            height="62rpx"
            bg-color="#fff"
            search-icon-size="48rpx"
            placeholder-color="#666"
            disabled
            @click="onClickSearch"
          ></u-search>
          <zm-icon v-if="isShowScan" :name="useImage('/zuimei-film-oss/1.0.0/icons/icon-scan.png')" size="40rpx" weight="bold" custom-class="ml-24" @click="handleScan"></zm-icon>
        </view>
      </view>
    </zm-navbar>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import { mapGetters } from "vuex"
export default {
  name: "deco-header-bar",
  mixins: [mixin],
  data() {
    return {
      scrollFlag: false
    }
  },
  computed: {
    navbarCustomStyle() {
      const style = {}
      if (this.scrollFlag) {
        style.boxShadow = "0rpx 0rpx 16rpx 1rpx rgba(102, 102, 102, 0.15)"
      }
      return style
    },
    isShowScan() {
      let show = true
      // #ifdef WEB
      const evns = ["ysf"]
      show = evns.includes(this.webEvn) || this.webEnv == "wxWeb"
      // #endif
      return show
    },
    ...mapGetters(["cityName", "cityCode", "location", "tabbar", "webEvn", "webEnv"])
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const { mitt } = this.useParent("zm-view")
      if (mitt) {
        mitt.on("scroll", (top) => {
          if (top <= 50 && this.scrollFlag) {
            this.scrollFlag = false
          } else if (top > 50 && !this.scrollFlag) {
            this.scrollFlag = true
          }
        })
      }
    },
    onClickSearch() {
      this.toView("pages/main/search-list/search-list")
    },
    handleScan() {
      const handle = async (res) => {
        const result = await this.$api.card.qrCodeBind({ qrCode: res.result })
        if (result.bindType == "coupon") {
          uni.$setCache("couponBindTips", `已绑定${result.bindNum || 1}张券`)
          uni.$toView("pages/person/coupon-list/coupon-list")
        } else if (result.bindType == "card") {
          uni.$setCache("cardBindTips", `已绑定${result.bindNum || 1}张卡`)
          uni.$toView("pages/person/film-card-list/film-card-list")
        } else if (result.bindType == "batchCoupon") {
          uni.$setCache("couponBindTips", `已绑定${result.bindNum || 1}张券`)
          uni.$toView("pages/person/coupon-list/coupon-list")
        } else if (result.bindType == "couponCard") {
          uni.$setCache("couponBindTips", result.message)
          uni.$toView("pages/person/coupon-list/coupon-list")
        }
        this.mitt?.emit("deco-person-property-bar.refresh")
      }
      // #ifdef WEB
      uni.$auth.sdk.scanQRCode({
        success: (res) => handle(res)
      })
      // #endif
      // #ifndef WEB
      uni.scanCode({
        success: (res) => handle(res)
      })
      // #endif
    }
  }
}
</script>

<style lang="scss" scoped>
.box-shadow {
  box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(102, 102, 102, 0.15);
}
::v-deep .u-search__content__input {
  font-size: 24rpx;
}
</style>
